<template>
  <div class="search_bar" :style="{backgroundImage:backgroundImage}">
    <img class="search_bar_img" :src="imgBaseUrl + backgroundImage" />
    <div :class="{'search-content mindWidth': !show,'home-header-fixed': show,}">
      <div class="search_text changeHanld">
        <div
          class="todolist"
          :class="index == cureentIndex ? 'active' : ''"
          v-for="(item, index) in todolist"
          :key="index"
          @click="hanldIndex(index, item.itemValue)"
        >
          <span>{{ item.itemText }}</span>
        </div>
      </div>
      <div class="search_main" :class="show ? 'mindWidth' : ''">
        <div class="left_logo">
          <img src="../../../static/image/login/logo.png" v-if="show" class="changeHanld" />
          <input
            type="text"
            :placeholder="`请输入你想要的${
              todolist[cureentIndex] && todolist[cureentIndex].itemText
            }`"
            @blur="getHistoryList('blur')"
            v-model="dataIndex"
            @focus="getHistoryList('focus')"
          />
          <button class="changeHanld" @click="goSearch">
            <i class="el-icon-search"></i>搜索
          </button>
          <!-- 查企业 -->
          <ul class="company_list filex" v-if="cureentIndex == 0">
            <div v-show="!showHistory && company_list.length>0">
              <li
                v-for="(v, i) in company_list"
                :key="i"
                @mouseenter="company = i"
                @mouseleave="company = ''"
                :class="company === i ? 'active' : ''"
                class="changeHanld"
                @click="goRest(v.companyId)"
              >
                <span
                  class="changeHanld"
                  :class="v.companyName.length >= 90 || show ? 'active' : ''"
                  v-html="v.companyName"
                ></span>
              </li>
            </div>
            <div v-show="showHistory">
              <li
                v-for="(v, i) in searchList"
                :key="i"
                @mouseenter="company = i"
                @mouseleave="company = ''"
                :class="company === i ? 'active' : ''"
                class="changeHanld"
                @click="goRest(v.companyId)"
              >
                <img
                  src="@/static/image/time.png"
                  style="width: 24px;height:24px;margin-right: 10px"
                />
                <span
                  class="changeHanld"
                  :class="v.companyName.length >= 90 || show ? 'active' : ''"
                >{{v.companyName}}</span>
              </li>
            </div>
            <div
              v-if="searchList.length > 0 && showHistory && cureentIndex == 0"
              class="flex flex-end search-more"
            >
              <span @click="toMoreHistory">更多历史</span>
              <span @click="deleteHistory">删除历史</span>
            </div>
          </ul>
          <!-- 查政策 -->
          <ul
            class="company_list filex"
            v-if="policyList.length > 0 && dataIndex !== '' && cureentIndex == 1"
          >
            <li
              v-for="(v, i) in policyList"
              :key="i"
              @mouseenter="policyItem = i"
              @mouseleave="policyItem = ''"
              :class="policyItem === i ? 'active' : ''"
              @click="goPolicy(v.policyId, i)"
            >
              <span
                class="changeHanld"
                :class="v.title.length >= 90 || show ? 'active' : ''"
                v-html="v.title"
              ></span>
            </li>
          </ul>
          <!-- 查项目 -->
          <ul
            class="company_list filex"
            v-if="projectList.length > 0 && dataIndex !== '' && cureentIndex == 2"
          >
            <li
              v-for="(v, i) in projectList"
              :key="i"
              @mouseenter="policyItem = i"
              @mouseleave="policyItem = ''"
              :class="policyItem === i ? 'active' : ''"
              class="changeHanld"
              @click="goProject(v.projectName)"
            >
              <span
                class="changeHanld"
                :class="v.projectName.length > 120 && !show ? 'active' : ''"
                v-html="v.projectName"
              ></span>
            </li>
          </ul>
          <!-- 查不到内容 -->
          <ul
            v-if=" company_list.length == 0 && policyList.length == 0 &&projectList.length == 0 && dataIndex != ''"
            class="filex"
          >
            <li v-if="cureentIndex === 0" @click="goRestName()">{{ dataIndex }}</li>
            <li v-else>查不到你想要的{{ todolist[cureentIndex].itemText }}</li>
          </ul>
        </div>
        <div class="right_login" v-if="show" v-show="!isShowLogin">
          <span class="changeHanld" @click="goLogin">登录</span>
        </div>
        <div class="userinfo" v-if="show" v-show="isShowLogin">
          <el-dropdown trigger="hover">
            <div class="userinfo">
              <div class="user_image">
                <img
                  class="userImage"
                  v-if="userInfo && userInfo.avatar"
                  :src="getUserHeadPortrait(userInfo.avatar)"
                />
              </div>
              <span>
                {{
                userInfo.nickName.length > 10
                ? userInfo.nickName.substr(0, 10) + "..."
                : userInfo.nickName
                }}
              </span>
            </div>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="goVIP" v-show="isShowLogin">会员中心</el-dropdown-item>
                <el-dropdown-item @click.native="hanldErevent" v-show="isShowLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="hotSearch">
        <span>热门搜索 :</span>
        <ul>
          <!-- 企业 -->
          <li
            v-show="cureentIndex == 0"
            class="changeHanld"
            v-for="(item, index) in companySearch"
            :key="'info1'+index"
            @click="godetails(item.name, item.sourceId)"
          >
            <span>{{ item.name }}</span>
          </li>
          <!-- 政策 -->
          <li
            v-show="cureentIndex == 1"
            class="changeHanld"
            v-for="(item, index) in policySearch"
            :key="'info2'+index"
            @click="godetails(item.name, item.id)"
          >
            <span>{{ item.name }}</span>
          </li>
          <!-- 项目 -->
          <li
            v-show="cureentIndex == 2"
            class="changeHanld"
            v-for="(item, index) in projectSearch"
            :key="'info3'+index"
            @click="godetails(item.name, item.id)"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
    <!-- 查询已满 -->
    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="300px"
    >
      <template #footer>
        <div class="contents_qydb">
          <img src="@/static/image/cwhyts2.png" alt class="imgs_qydb" />
          <div class="goVip">
            <div class="top">可查询数量已满</div>
            <div class="bn">成为VIP会员畅享更多权益</div>
          </div>
          <div class="option">
            <span class="spans_qydb" @click="dialogVisible = false">再用看看</span>
            <p class="ps_qydb">升级VIP</p>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  commonRequest,
  postRequest,
  imgBaseUrl,
  searchHistoryList,
  deleteSearch
} from "../../api/api.js";
import { debounce } from "../../util/throttle.js";
import { mapMutations, mapActions } from "vuex";
import loginDialog from "../../components/login_item/LoginDialog";
import { getToken, removeToken, sessionTake } from "../../util/validate.js";
import {
  userInfo,
  getCompany,
  getPolicy,
  getProject,
  getHomeDictConfigInfo,
  getSearchKeywordsInfo,
  getHomeBackgroundConfigInfo
} from "../../api/home.js";
export default {
  name: "search",
  components: {
    loginDialog
  },
  props: {
    backgroundImage: ""
  },
  data() {
    return {
      imgBaseUrl: imgBaseUrl,
      // backgroundImage: "",
      dialogVisible: false, // 查询已满
      show: false, //
      policyList: [], // 政策列表
      projectList: [], // 项目列表
      cureentIndex: 0,
      hotSearchKey: [], // 获取热词
      todolist: [],
      dataIndex: "", // 搜索框的是企业名
      company: "",
      userName: "", // 用户名称
      userImg: "", //用户头像
      company_list: [], // 公司列表
      isShow: false, // 是否显示
      policyItem: "", // 政策项
      projectItem: "", // 项目项
      companySearch: "", //  企业关键字
      policySearch: "", //  政策关键字
      projectSearch: "", // 项目关键字
      alreadyExpired: "",
      searchList: [], // 搜索历史企业
      showHistory: false //是否显示搜索历史
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    isShowLogin() {
      let token = this.$store.state.token;
      return token ? true : false;
    }
  },
  watch: {
    dataIndex: debounce(function(e) {
      this.dataIndex = e.trim();
      if (e.trim() !== "") {
        this.showHistory = false;
        this.changeValue();
      } else {
        this.showHistory = true;
        this.company_list = [];
      }
    }, 500)
  },
  mounted() {
    window.addEventListener("scroll", this.widowChange);
    this.hanldIndex(0, "company");
    this.getKeyWord();
    this.getSearchHistory();
    // this.getBackground();
  },
  methods: {
    ...mapActions(["getUserInfo", "handleLogout"]),
    ...mapMutations(["setIsShow"]),
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    getUserHeadPortrait(url) {
      return url.indexOf("http") != -1 ? url : imgBaseUrl + url;
    },
    // 企业搜索历史
    getSearchHistory() {
      searchHistoryList({ pageNo: 1, pageSize: 10 }).then(res => {
        if (res.code === 200) {
          this.searchList = res.result.records;
        }
      });
    },
    toMoreHistory() {
      window.open("/VIP/viewHistory", "_blank");
    },
    // 删除历史
    deleteHistory() {
      this.$confirm(`确认删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteSearch().then(res => {
          this.searchList = [];
          this.getSearchHistory();
          this.$message({ type: "success", message: "操作成功!" });
        });
      });
    },
    // input获取焦点时，显示企业搜索历史
    getHistoryList(type) {
      // console.log(this.cureentIndex, type);
      if (this.cureentIndex == 0 && this.dataIndex === "" && type === "focus") {
        this.getSearchHistory();
        this.showHistory = true;
      } else if (this.cureentIndex == 0 && type === "blur") {
        setTimeout(() => {
          this.showHistory = false;
        }, 500);
      } else {
        this.showHistory = false;
      }
    },
    // 查企业
    goRest(projectId) {
      if (this.cureentIndex == 0 && projectId != "") {
        window.open("/enterprise/honor?id=" + projectId, "_blank");
      }
    },
    goRestName() {
      window.open("/enterprise/honor?name=" + this.dataIndex, "_blank");
    },
    // 查政策
    goPolicy(id, index) {
      let value = this.dataIndex;
      if (this.cureentIndex === 1 && this.dataIndex != "") {
        window.open(`/inform/${id}`);
      }
    },
    // 查项目
    goProject(name) {
      if (this.cureentIndex == 2 && this.dataIndex != "") {
        window.open(`/projectQuery?value=${name}`, "_blank");
      }
    },
    //固定窗口
    widowChange() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 400) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    // 热门搜索
    hanldIndex(index, val) {
      this.cureentIndex = index;
      this.dataIndex = "";
      this.showHistory = false;
      if (this.cureentIndex === 0 && val === "company") {
        getSearchKeywordsInfo(val).then(res => {
          this.companySearch = res.result;
        });
      } else if (this.cureentIndex === 1 && val === "policy") {
        getSearchKeywordsInfo(val).then(res => {
          this.policySearch = res.result;
        });
      } else if (this.cureentIndex === 2 && val === "project") {
        getSearchKeywordsInfo(val).then(res => {
          this.projectSearch = res.result;
        });
      }
    },
    changeValue() {
      if (this.dataIndex == "") {
        this.company_list = [];
      } else if (this.cureentIndex === 0 && this.dataIndex !== "") {
        var reg = /^[a-zA-Z]+$/;
        if (reg.test(this.dataIndex)) {
          this.$message({
            type: "warning",
            message: "请输入正确的企业"
          });
          this.dataIndex = "";
          return;
        } else {
          let params = {
            companyName: this.dataIndex,
            area: "",
            city: "",
            companyId: "",
            endLat: 0,
            endLng: 0,
            pageIndex: 0,
            pageSize: 10,
            province: "",
            startLat: 0,
            startLng: 0
          };
          getCompany(params).then(res => {
            if (res.retCode == 0) {
              for (let i = 0; i < res.data.content.length; i++) {
                if (this.dataIndex !== "") {
                  res.data.content[i].companyName = res.data.content[
                    i
                  ].companyName.replace(
                    new RegExp(this.dataIndex, "g"),
                    `<em style="color:red;font-style:normal;">${this.dataIndex}</em>`
                  );
                }
              }
              this.company_list = res.data.content;
            } else if (res.code == 10005) {
              this.dialogVisible = true;
            }
          });
        }
      } else if (this.cureentIndex === 1 && this.dataIndex !== "") {
        let params = {
          beginDate: "",
          dq: "",
          endDate: "",
          pageIndex: 0,
          pageSize: 10,
          policyId: "",
          source: "",
          title: this.dataIndex,
          tzlb: "",
          userID: ""
        };
        getPolicy(params).then(res => {
          if (res.retCode == 0) {
            for (let i = 0; i < res.data.content.length; i++) {
              if (this.dataIndex !== "") {
                res.data.content[i].title = res.data.content[i].title.replace(
                  new RegExp(this.dataIndex, "g"),
                  `<em style="color:red;font-style:normal;">${this.dataIndex}</em>`
                );
              }
            }
            this.policyList = res.data.content;
          } else if (res.code == 10005) {
            this.dialogVisible = true;
          }
        });
      } else {
        let params = {
          projectName: this.dataIndex,
          pageIndex: 0,
          pageSize: 10
        };
        getProject(params).then(res => {
          if (res.code == 10001) {
            this.$refs.login.open();
            return;
          } else if (res.code == 10005) {
            this.dialogVisible = true;
            return;
          } else if (res.retCode == 0) {
            for (let i = 0; i < res.data.content.length; i++) {
              if (this.dataIndex !== "") {
                res.data.content[i].projectName = res.data.content[
                  i
                ].projectName.replace(
                  new RegExp(this.dataIndex, "g"),
                  `<em style="color:red;font-style:normal;">${this.dataIndex}</em>`
                );
              }
            }
            this.projectList = res.data.content;
          }
        });
      }
    },
    // 获取查询类型关键字
    getKeyWord() {
      getHomeDictConfigInfo().then(res => {
        this.todolist = res.result;
      });
    },
    // 点击热门搜索
    godetails(val, id) {
      if (this.cureentIndex === 0) {
        window.open("/enterprise/honor?id=" + id, "_blank");
      } else if (this.cureentIndex === 1) {
        // window.open("/policyNotice?value=" + val, "_blank");
        let province = sessionTake("provinceName");
        let city = sessionTake("cityName");
        window.open(`/policyNotice/${province}/${city}/1/${val}`, "_blank");
      } else if (this.cureentIndex === 2) {
        window.open("/projectQuery?value=" + val);
      }
    },
    //点击搜索按钮
    goSearch() {
      let province = sessionTake("provinceName");
      let city = sessionTake("cityName");
      if (this.dataIndex === "" && this.cureentIndex === 0) {
        window.open("/search", "_blank");
      }
      if (this.cureentIndex === 0) {
        window.open("/search?id=" + this.dataIndex, "_blank");
      } else if (this.cureentIndex === 1) {
        window.open(
          `/policyNotice/${province}/${city}/1/${this.dataIndex}`,
          "_blank"
        );
      } else {
        userInfo().then(res => {
          if (res.code === 10001) {
            this.$refs.login.open();
          } else {
            window.open("/projectQuery?value=" + this.dataIndex);
          }
        });
      }
    },
    getuserInfo() {
      // 判断是否有token
      let token = localStorage.getItem("saasToken");
      if (token) {
        userInfo().then(res => {
          // console.log(res);
          if (res.code === 0 && res.success === true) {
            this.userName = res.result.nickName; // 用户昵称
            this.userImg = res.result.avatar; // 用户头像
          }
          this.isShowLogin = false;
        });
      } else {
        this.isShowLogin = true;
      }
    },
    // 去登录
    goLogin() {
      this.$router.push("/login");
    },
    // 去会员中心
    goVIP() {
      console.log(555555555555);
      let nowTime = new Date().getTime();
      let endTime = localStorage.getItem("endTime");
      if (endTime !== null && endTime > nowTime) {
        window.open("/VIP", "_blank");
      } else {
        // 登录失效
        this.$refs.login.open();
        removeToken();
      }
    },
    // 点击退出登录
    hanldErevent() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$message({
          type: "success",
          message: "成功退出登录"
        });
        this.handleLogout();
        localStorage.removeItem("saasToken");
        this.isShowLogin = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.search-history {
  background: #fff;
  padding: 10px 15px 5px 15px;
  span {
    display: block;
    font-size: 12px;
    padding: 5px 10px;
    box-sizing: border-box;
    background: #eee;
    margin-bottom: 5px;
    cursor: pointer;
  }
}
.search-more {
  background: #eee;
  height: 40px;
  line-height: 40px;
  span {
    font-size: 12px;
    color: #ccc;
    margin-right: 20px;
    cursor: pointer;
  }
}
.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;

  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}
.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}
.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}
/* 弹框结束 */
.home-header-fixed {
  height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 #999;
  display: flex;
  align-items: center;
  padding-left: 10px;

  .search_main {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      // width: 100%;
      font-size: 14px;
      padding: 4px 16px;
      border-radius: 4px;
      white-space: nowrap;

      &.active {
        &:hover {
          white-space: nowrap;
          animation: textAnimation 10s infinite;
        }
      }
    }

    .left_logo {
      position: relative;
      display: flex;

      .filex {
        background-color: #fff;
        position: absolute;
        left: 90px;
        top: 35px;
        width: 290px;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        &::-webkit-scrollbar {
          width: 8px;
          background-color: #e7eaf0;
        }

             &::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background-color: #e1e1e2;
        }

             &::-webkit-scrollbar-track {
          background-color: #fff;
        }

             &::-webkit-scrollbar-button {
          background-color: red;
          display: none;
        }

        li {
          height: 50px;
          display: flex;
          font-size: 14px;
          align-items: center;
          padding-left: 10px;

          &.active {
            color: #44a2ff;
          }
        }
      }
    }

    .right_login {
      span {
        padding: 2px 7px;
        color: #44a2ff;
        // border: 1px solid #44a2ff;
      }
    }

    .userinfo {
      // width: 200px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .user_image {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
      }

      img {
        height: 100%;
        width: 30px;
      }

      span {
        color: #000;
        border: none;
        font-size: 14px;
      }
    }
  }

  .hotSearch,
  .search_text {
    display: none;
  }

  img {
    height: 30px;
  }

  input {
    width: 270px;
    height: 30px;
    border: 1px solid #44a2ff;
    border-radius: 4px 0 0 4px;
    padding-left: 10px;
    font-size: 18px;

    &::placeholder {
      color: #ddd;
      font-size: 18px;
    }

    margin-left: 20px;
  }

  button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 4px 4px 0;
    width: 60px;
    height: 30px;
    font-size: 12px;
    background-color: #44a2ff;
    color: #fff;

    i {
      font-size: 14px;
      color: #fff;
      margin-right: 6px;
    }
  }
}

.search_bar {
  height: calc(480px);
  position: relative;
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
  // background-size: 100% 100%;
  // background: url(https://bootapi.51bmj.cn/sys/common/static/temp/shouyebeijing_v1.8-1_1611805026296.8-1.png)
  //   center center no-repeat;
  .search_bar_img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
  }
  .search-content {
    z-index: 999;
    height: 240px;
    display: flex;
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    bottom: -130px;
    flex-direction: column;
    align-items: center;

    .search_text {
      width: 540px;
      display: flex;
      font-size: 18px;
      margin: 0 20px 20px;

      .todolist {
        width: 80px;
        height: 40px;
        font-size: 18px;
        display: flex;
        margin: 0 50px;
        align-items: center;
        justify-content: center;
        color: #fff;

        &.active {
          font-size: 18px;
          position: relative;
          padding: 8px 10px;
          color: #44a2ff;
          background: #fff;
          border-radius: 10px;

          &::before {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #fff;
            // background-color: red;
            transform: rotate(45deg);
            left: 45%;
            right: 50%;
            bottom: -3px;
          }
        }
      }
    }

    .search_main {
      height: 60px;
      display: flex;

      .left_logo {
        display: flex;
        position: relative;
        z-index: 999;
      }

      input {
        width: 670px;
        height: 100%;
        border-radius: 6px 0px 0px 6px;
        border: 1px solid #44a2ff;
        background-color: #fff;
        font-size: 18px;
        padding-left: 10px;
        color: #333;

        &::-webkit-input-placeholder {
          color: #ddd;
          font-size: 18px;
        }
        &::-moz-placeholder {
          color: #ddd;
          font-size: 18px;
        }
        &::-ms-input-placeholder {
          color: #ddd;
          font-size: 18px;
        }
      }

      button {
        width: 120px;
        height: 100%;
        border-radius: 0px 6px 6px 0;
        font-size: 20px;
        color: #fff;

        i {
          font-size: 20px;
          color: #fff;
          margin-right: 10px;
        }
      }

      ul {
        width: 665px;
        position: absolute;
        max-height: 300px;
        overflow-y: auto;
        left: 2px;
        top: 60px;
        box-shadow: 0px 0px 2px rgba(245, 245, 245, 0.5);
        border-radius: 0 0px 6px 6px;
        &::-webkit-scrollbar {
          width: 8px;
          background-color: #e7eaf0;
        }

             &::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background-color: #e1e1e2;
        }

             &::-webkit-scrollbar-track {
          background-color: #fff;
        }

             &::-webkit-scrollbar-button {
          background-color: red;
          display: none;
        }

        li {
          height: 60px;
          font-size: 16px;
          padding-left: 12px;
          display: flex;
          align-items: center;
          background-color: #fff;
          color: #000;
          overflow: hidden;
          white-space: nowrap;

          &.active {
            color: #44a2ff;
            background-color: rgb(245, 245, 245);
          }

          span {
            &.active:hover {
              white-space: nowrap;
              animation: fontAnimation 6s infinite;
            }
          }
        }
      }
    }

    .hotSearch {
      display: flex;
      margin-top: 10px;
      position: absolute;
      bottom: 82px;
      left: 210px;

      span {
        font-size: 16px;
        color: #fff;
      }

      ul {
        display: flex;
        align-items: center;

        li {
          font-size: 16px;
          margin-left: 20px;
          // color: #fff;

          span {
            color: #fff;

            &:hover {
              border-bottom: 1px solid #fff;
            }
          }
        }
      }
    }
  }
}
/* 文字动画1 */
@keyframes textAnimation {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-160%, 0, 0);
    display: none;
    -webkit-transform: translate3d(-160%, 0, 0);
  }
}

/* 文字动画2(有固定) */
@keyframes fontAnimation {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-30%, 0, 0);
    display: none;
    -webkit-transform: translate3d(-30%, 0, 0);
  }
}
</style>